---
title: Rainbow Button
date: 2024-09-19
description: An animated button with a rainbow effect.
author: dillionverma
published: true
---

<ComponentPreview 
   name="rainbow-button-demo" 
   description="An animated button with a rainbow effect."
   styleSwitch={true}
   button="copy"
   dots={false}
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add rainbow-button
```

<Steps>

<Step>Update the import paths to match your project setup.</Step>

<Step>Update `globals.css`</Step>

Add the following to your `globals.css` file:

```css
:root {
  --color-1: 0 100% 63%;
  --color-2: 270 100% 63%;
  --color-3: 210 100% 63%;
  --color-4: 195 100% 63%;
  --color-5: 90 100% 63%;
}
```

<Step>Update `tailwind.config.ts`</Step>

Add the following animations to your `tailwind.config.ts` file:

```ts title="tailwind.config.ts" {5-20}
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "color-1": "hsl(var(--color-1))",
        "color-2": "hsl(var(--color-2))",
        "color-3": "hsl(var(--color-3))",
        "color-4": "hsl(var(--color-4))",
        "color-5": "hsl(var(--color-5))",
      },
      animation: {
        rainbow: "rainbow var(--speed, 2s) infinite linear",
      },
      keyframes: {
        rainbow: {
          "0%": { "background-position": "0%" },
          "100%": { "background-position": "200%" },
        },
      },
    },
  },
};
```

</Steps>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="rainbow-button" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Update `globals.css`</Step>

Add the following to your `globals.css` file:

```css
:root {
  --color-1: 0 100% 63%;
  --color-2: 270 100% 63%;
  --color-3: 210 100% 63%;
  --color-4: 195 100% 63%;
  --color-5: 90 100% 63%;
}
```

<Step>Update `tailwind.config.js`</Step>

Add the following animations to your `tailwind.config.js` file:

```js title="tailwind.config.js" {5-20}
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "color-1": "hsl(var(--color-1))",
        "color-2": "hsl(var(--color-2))",
        "color-3": "hsl(var(--color-3))",
        "color-4": "hsl(var(--color-4))",
        "color-5": "hsl(var(--color-5))",
      },
      animation: {
        rainbow: "rainbow var(--speed, 2s) infinite linear",
      },
      keyframes: {
        rainbow: {
          "0%": { "background-position": "0%" },
          "100%": { "background-position": "200%" },
        },
      },
    },
  },
};
```

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop     | Type            | Description                                    |
| -------- | --------------- | ---------------------------------------------- |
| children | React.ReactNode | The content to be displayed inside the button. |
